<template>
  <div>
    <!--<detail-header :title="sightName"></detail-header>-->
    <detail-banner
      :sightName="sightName"
      :gallaryImgs="gallaryImgs"
      :bannerImg="bannerImg"
    ></detail-banner>
    <detail-list :list="categoryList"></detail-list>
  </div>
</template>
<script>
import DetailBanner from './components/Banner.vue'
import DetailHeader from './components/Header.vue'
import DetailList from './components/List.vue'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      sightName: '',
      gallaryImgs: [],
      bannerImg: '',
      categoryList: []
    }
  },
  methods: {
    getDetailInfo () {
      axios.get('/static/mock/detail.json')
        .then((response) => {
          console.log(response)
          const detailInfo = response.data
          if (detailInfo.ret && detailInfo.data) {
            const detailData = detailInfo.data
            this.sightName = detailData.sightName
            this.bannerImg = detailData.bannerImg
            this.gallaryImgs = detailData.gallaryImgs
            this.categoryList = detailData.categoryList
          }
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>
<style lang="stylus" scoped>
</style>
